<template>
  <div class="common-list">
    <div class="com">
      <div class="header">
        <topbav></topbav>
        <div class="stu">
          <!-- 课程信息 -->
          <div class="course-selection">
            <span class="course-name">前端框架应用项目开发 (已选105人)</span>
          </div>
          <!-- 教师信息 -->
          <div class="teacher-info">
            <h2>刁建忠</h2>
            <p>教师</p>
          </div>
        </div>
        <button @click="viewCourseScore" class="score-btn">课程成绩</button>
      </div>

      <div class="course-info">
        <div class="study">
          <div class="study-box">
            <button @click="startLearning" class="start-btn">开始学习</button>
            <p class="study-msg">您还未选课学习，快来和我们一起学习吧！</p>
          </div>
        </div>
      </div>

    </div>

    <!-- 导航栏容器 -->
    <div class="nav-container">
    <ul class="nav-list">
    <li
      v-for="item in sections" :key="item.id"
      :class="{ active: item.id === activeSectionId }"
      @click="navigateToSection(item.id)"
      class="nav-item"
    >
      {{ item.title }}
    </li>
  </ul>
      <div class="nav-content" v-if="showIntroduction" >
      <div class="briefIntroduction" >
        <p>简介：前端框架应用项目开发</p>
        <p>课程目标：掌握前端框架在前端项目开发中的应用，熟悉当前市场主流的前端项目开发方法</p>
      </div>

  <!-- 弹幕控制和输入区域 -->
    <!-- 弹幕控制和输入区域 -->
    <div class="barrage-control">
          <button @click="toggleBarrage" style="color: white">{{ isBarrageOpen ? '收起' : '打开' }}</button>
          <input v-model="barrageText" placeholder="输入弹幕" />
          <button @click="sendBarrage" style="color: white">发送</button>
        </div>
      </div>
      </div>

      <!-- 弹幕显示区域 -->
      <div class="barrage-box" v-if="isBarrageOpen">
        <div v-for="item in list" :key="item.text" class="barrage-item">
          {{ item.text }}
        </div>
      </div>
  
    <!-- 动态组件容器 -->
    <div class="dynamic-component-container">
      <component :is="currentComponent" />
    </div>


    <div class="footer">
      <div class="footer">
        <div class="service-links">
          <ul>
            <li><a href="/about-us">关于我们</a></li>
            <li><a href="/contact-us">联系我们</a></li>
            <li><a href="/help-center">帮助中心</a></li>
            <li><a href="/feedback">意见反馈</a></li>
          </ul>
        </div>
        <div class="copyright">
          &copy;2020 codelover.club 版权所有 粤ICP备20072498号-1
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import topbav from './topbav.vue';
import { ref, onMounted } from 'vue';
import axios from 'axios';
import Exam from './Exam.vue';
import ProgressLeader from './ProgressLeader.vue';
import Questions from './questions.vue';
import voting from './voting.vue';
// 导入 Vant UI 组件
import { Button } from 'vant';

// 状态定义
const isBarrageOpen = ref(true);
const list = ref([]);
const barrageText = ref('');
const courseInfo = ref(null);
const currentComponent = ref(Exam);
const activeSectionId = ref('tasks');
const showIntroduction = ref(true);


// 定义组件映射
const componentMap = {
  tasks: Exam,
  qanda: Questions,
  progress: ProgressLeader,
  polls: voting
};

// 定义导航栏数据
const sections = ref([
  { id: 'tasks', title: '任务' },
  { id: 'qanda', title: '问答' },
  { id: 'progress', title: '进度榜' },
  { id: 'polls', title: '投票榜' }
]);

// 导航点击事件处理函数
function navigateToSection(sectionId) {
  // 设置当前组件
  currentComponent.value = componentMap[sectionId];
  // 更新激活的导航项 ID
  activeSectionId.value = sectionId;
  // 根据组件类型切换简介的显示状态
  // 只有当 sectionId 为 'tasks' 时简介显示，其他情况不显示简介
  showIntroduction.value = (sectionId === 'tasks');
}
// 打开和收起弹幕功能
function toggleBarrage() {
  isBarrageOpen.value = !isBarrageOpen.value;
}

// 发送弹幕功能
function sendBarrage() {
  if (barrageText.value.trim()) {
    list.value.push({
      text: barrageText.value,
      // 其他弹幕属性...
    });
    barrageText.value = ''; // 清空输入框
  }
}

function viewCourseScore() {
  window.open('https://codelover.club/qb/study?currNo=43', '_blank'); // 在新标签页打开
}

async function fetchCourseInfo() {
  try {
    const response = await axios.get('/api/course-info');
    courseInfo.value = response.data;
  } catch (error) {
    console.error('Error fetching course info:', error);
  }
}

// 使用 onMounted 钩子
onMounted(() => {
  fetchCourseInfo();
  // 如果需要生成初始弹幕，确保 generateBarrage 函数正确实现
  // generateBarrage();
});
</script>

<style scoped>
.common-list {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;

}

.com {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding:  3vw 3vw  0 3vw;
  background-image: url('/public/img/e9d397ef2bd7802a1f57a083815d29f7.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 95.98%;
}
.nav-container {
  align-items: center;

}
.nav-content{
  display: flex;
}
.briefIntroduction{
  padding: 3vw;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: auto;
  border-radius: 30px;
}

.barrage-control {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.barrage-box {
  width: 300px; /* 根据需要调整 */
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  overflow-y: auto;
}

.barrage-item {
  color: #fff;
  margin-bottom: 5px;
}

.header {
  color: white;
  margin-top: 6vh;

}
h2{
  font-size: 1.2rem;
}

.study {
  margin-left: auto;
}

.study-box {
  border: 1px solid #ccc;
  padding: 1vw 2vw;
  text-align: center;
  width: 15vw;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 1.5vh;
  margin :10vh;
}

.course-selection {
  color: rgb(255, 255, 255);
  font-size: 1.7em;
}

.course-name,
.teacher-info h2,
.course-detail h3,
p {
  font-family: 'Roboto', sans-serif;
}

.teacher-info p {
  background-color: rgba(255, 165, 0, 0.8);
  padding: 3px 5px;
  width: 10%;
  border-radius: 15px;
}


.start-btn {
  background-color: orange;
  color: white;
  border: none;
  cursor: pointer;
  width: 90%;
  border-radius: 15px;

}

.nav-container {
  align-items: flex-start;
}

.nav-and-barrage {
  display: flex;
  flex-direction: row;
  width: 70%; /* 或其他宽度，根据需要调整 */
}

.nav-list {
  list-style: none;
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-item {
  cursor: pointer;
  padding: 0.5vw 1vw;
  border-radius: 5px;
  transition: background-color 0.3s;
  margin: 0 6vw;
  transition: background-color 0.3s, font-weight 0.3s, font-size 0.3s;
  /* 添加过渡效果 */
  cursor: pointer;
  margin: 0 6vw;
  position: relative;
}
.nav-item.active {
  font-weight: bold; /* 加粗 */
  font-size: 1.1em; /* 字体变大 */
  text-decoration: underline; /* 下划线 */
}
.nav-item:hover {
  background-color: #e0e0e0;
}


.study-msg {
  margin-top: 1vw;
}

.score-btn {
  /* 为查看课程成绩按钮添加样式，比如颜色、背景、边框等 */
  background-color: dodgerblue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  /* 或根据需要调整 */
  border-radius: 15px;
  font-family: 'Roboto', sans-serif;
margin-left: 0px;
}

.barrage-box {
  width: 300px; /* 设置弹幕框的宽度 */
  height: 200px; /* 设置弹幕框的高度 */
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  overflow-y: auto;
  border: 1px solid #ccc; /* 添加边框 */
  border-radius: 5px; /* 添加圆角 */
  margin-left: auto; /* 新增：使用 auto 使弹幕框靠右 */
  margin-right: 6vw;

}

.barrage-item {
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  margin-bottom: 5px;
}



.right-container {
  padding-left: 20px;
}

.tasks-qanda-progress-polls ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  /* 防止换行 */
  width: 100%;
  padding: 0;
  margin: 0;
}

.tasks-qanda-progress-polls li {
  margin: 0;
  /* 移除原有的外边距 */
  text-align: center;
  background-color: #ffffff;
  border-radius: 5px;
  cursor: pointer;
  flex: 1;
}

.send-barrage {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.send-barrage input {
  flex: 1;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-right: 5px;
}

.send-barrage button {
  padding: 8px 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.footer {
  padding: 20px 0;
  margin-top: 20px;
  text-align: center;
  /* 使版权信息居中 */
}

.service-links {
  margin-bottom: 20px;
  /* 根据需要调整 */
}

.service-links ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  /* 使链接并排显示 */
}

.service-links li {
  margin: 0 10px;
  /* 为链接之间添加一些间距 */
}

.service-links a {
  text-decoration: none;
  color: #333;
}

.copyright {
  color: #6c757d;
}

@media (max-width: 600px) {
  .start-btn {
    padding: 5vw 10vw;
    /* 在小屏幕上使用更小的padding */
    border-radius: 2.5vw;
    /* 在小屏幕上使用更小的border-radius */
  }
}
</style>